<template>
  <div class="sub-div">
    <p>子组件1</p>
    <p>玩具：{{ toy }}</p>
    <p>书籍：{{ book }}</p>
    <p><button @click="changeHouse($parent)">修改数据</button></p>
  </div>

</template>
<script setup lang="ts">
import { ref } from 'vue';

let toy = ref('奥特曼')
let book = ref('三国演义')

const changeHouse = (parent: any) => {
  parent.house -= 1
}

defineExpose({
  toy,
  book
})

</script>
<style lang="scss" scoped>
.sub-div {
  margin-top: 30px;
  padding: 10px 10px;
  color: #42b983;
  font-weight: bold;
  background-color: rgb(15, 105, 184);
}
</style>
